[小ネタ]Slackボットの体験をデザインするBlock Kit Builder

こんにちは、中村です。

Slack APIを利用したメッセージ送信はテキストだけでなくリッチでインタラクティブなメッセージを送信することができます。しかしドキュメントを読みながら実装していくと結構コストが高くなります。 Block Kit Builderを使うことで実際に送信するJSONをGUIにて生成できます。これにより高速にプロトタイプの作成が可能になると思います。

Block Kit Builder

2019年4月2日現在では、下記のブロックが利用できます。

項目名	説明
Section	テキストやマークダウンを表示する領域。画像やボタン要素も対応している。
Image	画像とその説明を表示する領域。
Context	説明やメタデータを表示する領域
Actions	5つのアクションを表示する領域
Divider	複数のコンテンツ表示を分ける場合に利用する
Section with Image	画像が表示されているSection
Section with Button	ボタンが表示されているSection
Section with Select	セレクトリストが表示されているSection
Section with Overflow	オーバフローメニューが表示されているSection
Section with Datepicker	日付選択が表示されているSection
Section with Fields	フィールド分けされているSection

Start with a Templateをクリックすると既に大枠が作成されているものを利用することもできます。Templateを確認してみて要件に合うものがないか確認してみるといいかもしれません。

ブロックもしくはテンプレートを選択すると、Desktop/Mobileでのビジュアル(タブで切り替え)とJSONデータが表示されます。もし選択したものにボタンなどのUIがある場合はそれをクリックした時のJSON情報も確認することができます。またJSONを編集することでビジュアルへも反映されます。

また作成したデータは、任意のワークスペースのチャネルに送信できます。これによりデザインしたものを保存しておけますが、メッセージを編集してJSONを取得する等はできないのでBuilder右上にあるCopy機能を使って保存してください。

まとめ

小ネタですがBlock Kit Builderの説明でした。ボットを構築する上でペルソナやフローの確定後に文言やUIの検討が必要になります。ここの設計がボットのUXに大きな影響を与えるためBuilderを使ってプロトタイプの作成を高速化しつつ、お客様との体験設計に利用できると考えると非常に有用なツールです。

チャットボット開発は弊社にご相談ください。

またAmazon Connectのキャンペーンを行なっております。こちらもご相談お待ちしております。